<template>
    <div>
        <Modal title="入库单" v-model="show" width="1400px" @on-visible-change="showModal" :closable="false" :mask-closable="false">
            <el-form ref="queryParams" inline label-position="right" label-width="80px" v-model="queryParams">
                <el-form-item label="sku编码">
                    <el-input size="small" @keyup.enter.native="search()" v-model="queryParams.skuCode" placeholder="sku编码" style="width: 180px" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-on:click="search()" type="primary">{{$t('搜索')}}</el-button>
                    <el-button size="small" v-on:click="reset()">{{$t('重置')}}</el-button>
                </el-form-item>
            </el-form>
            <el-row style="margin-bottom:12px">
                <el-select size="small" @change="page.current=1;getList();" v-model="page.pageSize" style="width: 120px;float: left;">
                    <el-option :value="10">每页10条</el-option>
                    <el-option :value="20">每页20条</el-option>
                    <el-option :value="30">每页30条</el-option>
                    <el-option :value="50">每页50条</el-option>
                </el-select>
                <el-button size="small" :type="queryParams.state==''?'success':'default'" @click="searchOrder('','')">全部</el-button>
                <el-button size="small" :type="queryParams.state=='0'?'success':'default'" @click="searchOrder('0','')">待出货
                </el-button>
                <el-button size="small" :type="queryParams.state=='1' && queryParams.back=='' ?'success':'default'" @click="searchOrder('1','')">运送中
                </el-button>
                <el-button size="small" :type="queryParams.state=='2' && queryParams.back=='4' ?'success':'default'" @click="searchOrder('2','4')">已入库
                </el-button>
                <el-button size="small" :type="queryParams.state=='2' && queryParams.back=='1' ?'success':'default'" @click="searchOrder('2','1')">到仓处理中
                </el-button>
                <el-button size="small" :type="queryParams.state=='2' && queryParams.back=='2' ?'success':'default'" @click="searchOrder('2','2')">异常待确认
                </el-button>
            </el-row>
            <el-table size="small" ref="tbProducts" :data="storageBills" border style="width: 100%" v-loading="loading" small sum-text="合计" :summary-method="getSummaries" show-summary >
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="id" label="箱数" width="120">
                    <template slot-scope="scope">
                        <div>{{scope.row.boxCount}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="体积(m³)" width="120">
                    <template slot-scope="scope">
                        <div>{{scope.row.volume}}</div>
                        <div class="state-error">{{scope.row.realVolume}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="海运费" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.feeState==1">{{scope.row.fee}}</div>
                        <span v-else class="state-error-full">待扣费</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" fixed="left" label="批次号" width="180">
                    <template slot-scope="scope">
                        <div>ID:{{scope.row.id}}</div>
                        <div>{{scope.row.billId}}</div>
                        <div>{{scope.row.warehouseName}}</div>
                        <div>
                            <div v-if="scope.row.counter==1">
                                <span class="state-success-full">整柜</span>
                                <div>{{scope.row.counterNo}}</div>
                            </div>
                            <span class="state-error-full" v-else>散货</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="state" label="运送状态" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==1" class="state-primary-full">在途</span>
                        <span v-if="scope.row.state==2" class="state-success-full">已到仓</span>
                        <span v-if="scope.row.state==-1" class="state-error-full">已取消</span>
                        <span v-if="scope.row.state==0" class="state-warning-full">待出货</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="description" label="描述" width="180">
                </el-table-column>
                <el-table-column align="center" prop="back" label="确认状态" width="180">
                    <template slot-scope="scope">
                        <div v-if="scope.row.state>1">
                            <span v-if="scope.row.back==0" class="state-info-full">待处理</span>
                            <span v-if="scope.row.back==1" class="state-info-full">处理中</span>
                            <span v-if="scope.row.back==2" class="state-warning-full">待确认</span>
                            <span v-if="scope.row.back==4" class="state-success-full">已入库</span>
                        </div>
                        <span v-if="scope.row.state==0" class="state-info-full">待出货</span>
                        <span v-if="scope.row.state==1" class="state-info-full">未到仓</span> <span v-if="scope.row.state==-1" class="state-error-full">已取消</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" label="用户备注" width="180">
                    <template slot-scope="scope">
                        <div>{{scope.row.remark}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="sysRemark" label="系统备注" width="180">
                </el-table-column>
                 <el-table-column align="center" fixed="left" prop="state" label="操作" width="200">
                    <template slot-scope="scope">
                        <div>
                            <span>创建时间:{{scope.row.createTime|long2datetime}}</span>
                        </div>
                        <div v-if="scope.row.state==-1">
                            <span>取消时间:{{scope.row.cancelTime|long2datetime}}</span>
                        </div>
                        <div v-if="scope.row.state>0">
                            <span>出货时间:{{scope.row.shipTime|long2datetime}}</span>
                        </div>
                        <div v-if="scope.row.state>1">
                            <span>到仓时间:{{scope.row.signTime|long2datetime}}</span>
                        </div>
                        <div v-if="scope.row.back==4">
                            <span>入库时间:{{scope.row.okTime|long2datetime}}</span>
                        </div>
                  
              
              
               
                        <el-button size="small" type="info" v-on:click="toOk(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <el-pagination background :page-size="page.pageSize" layout="total, prev, pager, next" :total="page.total" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </Modal>
        <CStorageBill ref="dialogBill" @ok="getList()" @cancel="getList()" :billId="storageBill.id"></CStorageBill>
    </div>
</template>
<script>
import CStorageBill from "./CStorageBill.vue"
export default {
    name: "CAsync",
    data() {
        return {
            show: false,
            loading: false,
            queryParams: {
                counter: '',
                state: '',
                back: '',
                feeState: null,
                skuCode: ""
            },
            storageBill: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            storageBills: [

            ]
        }
    },
    components: {

        CStorageBill
    },
    methods: {
        toOk(row) {
            this.storageBill = row;

            this.$refs['dialogBill'].showDialog();
        },
        showDialog(skuCode) {
            this.queryParams.skuCode = skuCode;
            this.show = true;
        },
        showModal(val) {
            if (val) {
                this.search();
            } else {
                this.queryParams.skuCode = "";
                this.storageBills = [];
                this.storageBill = {

                }
            }
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }

                if (index == 2) {
                    const values = data.map(item => Number(item["boxCount"]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 箱';
                    } else {
                        sums[index] = 'N/A';
                    }

                }

                if (index == 3) {
                    const values = data.map(item => Number(item["volume"]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' (m³)';
                    } else {
                        sums[index] = 'N/A';
                    }

                }
            });


            return sums;
        },
        searchOrder: function(state, back) {
            this.queryParams.state = state;
            this.queryParams.back = back;
            this.search();
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {
                state: '',
                back: '',
                counter: "",
                feeState: null
            };
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/storagebill/getList.do", params).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.page.total = body.obj.totalCount;
                    me.storageBills = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }

    }
}
</script>